<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>人机大战之成语接龙</title>
    <style>
        h1{
            color:red;
        }
        .history{
            border: 1px solid gray;
            padding: 10px;
            border-radius: 10px;
            min-height: 100px;
        }
        .msg{
            color:red;
            font-weight: bold;
            margin: 10px 0;
        }
        form>div:nth-child(2){
            display: flex;
            gap:10px;
        }
        input{
            padding: 8px;
        }
    </style>
</head>
<body><%
    boolean isWin=false;
    String first="";
    String msg="";
    request.setCharacterEncoding("utf-8");
    String cy=request.getParameter("cy");
    String history=request.getParameter("history");
    if(history==null)history="";
    if(cy!=null) {
        cy=cy.trim();
        Class.forName("com.mysql.cj.jdbc.Driver");
        try(Connection cn= DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","12qwas")){
            try(PreparedStatement ps=cn.prepareStatement("select * from chengyu where cy=?")) {
                ps.setString(1, cy);
                try (ResultSet rs = ps.executeQuery()) {
                    if (!rs.next()) {
                        first = cy.substring(0, 1);
                        throw new Exception("Sorry,你输入的“"+cy+"”不是成语~");
                    }
                    history += "," + cy;
                    first = cy.substring(cy.length() - 1);

                }
            }
            try(PreparedStatement ps=cn.prepareStatement("select cy from chengyu where first=? order by rand() limit 1")) {
                ps.setString(1, first);
                try (ResultSet rs = ps.executeQuery()) {
                    if (rs.next()) {
                        cy = rs.getString("cy");
                        history += "," + cy;
                        first = cy.substring(cy.length() - 1);
                    } else {
                        msg="祝贺你在成语接龙游戏中战胜了计算机~";
                        isWin=true;
                    }

                }
            }


        }catch(Exception e) {
            msg = e.getMessage();
        }
    }else{

    }

    //history=",一清二白,白面儒生,生生不息,息息相关";
%>
<div class='kuang'>
    <h1>人机大战之成语接龙</h1>
    <div class='history'>
        <%
            String[] cys=history.split(",");
            for(int i=1;i<cys.length;++i){
                out.println("\t\t<p>"+i+".["+(i%2==0?"机":"人")+"]"+cys[i]+"</p>");
            }
        %>

    </div>
    <form method="post" action="">
        <div class='msg'><%=msg%></div>
        <div>
            <input type='text' name='cy'<%=isWin?"disabled":""%> />
            <input type="submit" value='提交' onclick="return check()"<%=isWin?"disabled":""%> />
            <input type="button" value='重新开始' onclick="again()" />
            <input type='hidden' name='history' value='<%=history%>' />
        </div>

    </form>
</div>
<script>
    const $=function (selector){//根据selector找到的第一个对象
        return document.querySelector(selector)
    }
    function again(){
        location.href=''
    }
    function check() {
        let first='<%=first%>'//用户接龙时成语的第一个字
        let cy = $('input[name=cy]').value//获取用户输入的成语
        cy = cy.trim()//删除两端空白
        console.log(cy)
        //if (cy.length<3||cy.length>14){
        // $('.msg').innerText = 'Sorry成语应该有3~14个汉字~'
        //return false//false表单不能提交，true可以提交
        //}
        //if(!cy.startsWith(first)){
        // $('.msg').innerText ='Sorry,你输入的“'+cy+'”必须以“'+first+'”字开头~'
        // return false
        //}
        //return true//客户端检测没有问题，可提交表单
        try {
            if (cy.length < 3 || cy.length > 14) throw new Error('Sorry成语应该有3~14个汉字~')
            if(!cy.startsWith(first))throw new Error('Sorry,你输入的“'+cy+'”必须以“<%=first%>”字开头~')
            return true
        }catch (e) {
            $('.msg').innerText=e.message//显示错误信息
            return false
        }
    }
</script>
</body>
</html>

